<template>
  <el-dialog
    title=""
    :visible.sync="dialogVisible"
    :fullscreen='true'
    :close="close"
  >
    <div class="form-group" v-loading="loading">
      <table-title/>
      <table-header/>
      <div class="form-table">
        <left-t/>
        <div class="line-m" style="border-left: 0">
          <div class="line-m-td" v-for="(detail, index) in detailList" :key="index">
            <div v-for="line in lineList" :key="line">
              <input v-model="detail[`value${line}`]"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="close">确 定</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { title, header, leftT } from './table';

export default {
  name: 'form-group',
  props: ['show', 'id'],
  components: {
    leftT,
    'table-title': title,
    'table-header': header
  },
  computed: {
    lineList() {
      const lineList = [];
      for (let i = 1; i < 32; i++) {
        lineList.push(i);
      }
      return lineList;
    }
  },
  data() {
    return {
      detailList: [],
      dialogVisible: false,
      loading: false
    };
  },
  methods: {
    async getDetail() {
      this.loading = true;
      const { bean } = await this.$services.post({
        type: 'REPORT',
        url: 'getRepMonthControllerDetail',
        params: {
          id: this.id
        }
      });
      this.loading = false;
      this.detailList = bean.repMonthDetails;
    },
    submit() {
      console.warn(this.detailList);
    },
    close() {
      this.dialogVisible = false;
      this.$emit('close');
    }
  },
  created() {
    // this.getDetail();
  },
  watch: {
    show(val) {
      if (val) {
        this.getDetail();
      }
      this.dialogVisible = val;
    }
  }
};
</script>

<style lang="scss">
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100% !important;
  width: 100%;

  p {
    width: 100% !important;
    flex: 1 !important;
    font-size: 9.0pt;
    border-bottom: 0 !important;
    line-height: initial;
    display: table-cell; /*按照单元格的样式显示元素*/
    vertical-align: bottom; /*底对齐*/
    text-align: center;
  }
}

.form-group {
  width: calc(31 * 40px + 250px + 33 * 1px);
  border-bottom: 2px solid windowtext;
  margin: 0 auto;

  .form-table {
    display: flex;

    .line-m {
      flex: 1;
      mso-style-parent: style0;
      font-size: 9.0pt;
      text-align: center;
      border-right: 1px solid windowtext;
      border-left: 1px solid windowtext;

      .line-m-td {
        display: flex;
        border-bottom: 1px solid windowtext;

        &:last-child {
          border-bottom: 0;
        }

        div {
          width: 40px;
          height: 20px;
          border-right: 1px solid windowtext;

          input {
            padding: 0 1px;
            width: 38px;
            height: 20px;
          }

          &:last-child {
            border-right: 0;
          }
        }
      }

      &:first-child {
        flex: none;
        width: 250px;
        text-align: left;
        line-height: 20px;
      }

      &:last-child {
        border-right: 1px solid windowtext;
      }

      .line-m-t {
        display: inline-block;
        vertical-align: middle;
        border-left: 1px solid windowtext;
        font-size: 0;

        &:first-child {
          border-left: 0;
          width: 229px;
          font-size: 9.0pt;
        }

        p {
          height: 20px;
          text-align: center;
          width: 20px;
          border-bottom: 1px solid windowtext;
          font-size: 9.0pt;

          &:last-child {
            border-bottom: 0;
          }
        }

        .line-m-ts {
          width: 50px;
        }

        .line-m-ts, .line-m-tt {
          display: inline-block;
          vertical-align: middle;
          border-left: 1px solid windowtext;
          border-top: 1px solid windowtext;
          font-size: 9.0pt;

          &:first-child {
            border-left: 0;
          }

          & > div {
            height: 20px;
            border-bottom: 1px solid windowtext;
            padding: 0 1px;
            text-align: justify;

            &:after {
              content: '.';
              width: 100%;
              display: inline-block;
              overflow: hidden;
              height: 0;
              vertical-align: middle;
            }

            &:last-child {
              border-bottom: 0;
            }
          }
        }
      }
    }

    .arow {
      text-align: justify;
      height: 20px;

      &:after {
        content: '.';
        width: 100%;
        display: inline-block;
        overflow: hidden;
        height: 0;
        vertical-align: middle;
      }
    }
  }
}
</style>
